<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>02-监听属性</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../VueJs/vue.js"></script>
    <style>
        img {
            width: 200px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <!-- 
        总结
            a. vm默认会对_data中的数据进行监听，数据发生更改，页面进行重新渲染
            b. 如果要对某个数据进行单独监听，不能依赖vm，而得使用 watch 属性
            c. 声明 watch 属性，跟data同级，内部监听的属性必须跟data中的属性同名
                如果是计算属性，也可以被单独监听
            d. 在监听的属性内部，使用 handler 函数进行操作，当属性发生变化会执行函数
            e. 默认这个函数不会在页面加载时调用，需要加上 immediate 属性，值为true
            f. 同比 computed 和 watch，计算属性是多对一，监听属性是一对多
     -->
    <div id="demo">
        <div class="container">
            <h3>案例-监听属性的介绍</h3>
            <hr>
            <!-- <img v-bind:src="'./imgs/black.jpg'" alt=""> -->
            <img :src="url" alt="">
            <div class="jumbotron">
                <h2>{{ info }}</h2>
                <br />
                <span class="btn btn-primary" @click="flag = !flag">切换状态</span>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        const vm = new Vue({
            el: '#demo',
            data: {
                // info: '晚安，玛卡巴卡！',
                info: '',
                flag: true,
                url: ''
            },
            // ***** 监听属性 watch
            // watch: {
            //     flag: {
            //         // 如果监听的对应数据发生改变，就需要处理事情
            //         handler() {
            //             console.log(1000);
            //             // 把复杂的东西写到处理函数中
            //             this.info = this.flag ? '晚安，玛卡巴卡！' : '早上好，德玛西亚！'
            //             this.url = this.flag ? './imgs/black.jpg' : './imgs/linght.jpg'
            //         },
            //         // 在页面初始化的时候，先调用一次
            //         immediate: true
            //     }
            // }
        })

        // 这种情况不多，了解即可(可以在一些其他异步情景下对数据进行监听)
        vm.$watch('flag', {
            handler() {
                this.info = this.flag ? '晚安，玛卡巴卡！' : '早上好，德玛西亚！'
                this.url = this.flag ? './imgs/black.jpg' : './imgs/linght.jpg'
            },
            immediate: true
        })

    </script>
</body>
</html>